import { useRequest, useSearch } from '@/hooks'
import { defaultParams, errorTips, successTips } from '@/utils'
import { defineComponent, PropType, reactive, toRaw, watch } from 'vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import { clone } from 'ramda'
import { rows } from '@/views/movies/moviesList/uilts'
import { useRoute } from 'vue-router'
const props = {
    visible: {
        type: Boolean as PropType<boolean>,
    },
    movie: {
        type: Object as PropType<defs.server.MovieEntity>,
    },
} as const
export default defineComponent({
    props,
    emits: ['update:visible', 'cancel', 'submit'],
    setup(props, { emit }) {
        const $route = useRoute()
        const pageState = reactive({
            dataSource: [] as number[],
        })
        function clear() {
            searchForm.value = { ...defaultParams, lang: props.movie?.lang, }
            search()
        }
        function search(is = true) {
            const params = clone(toRaw(searchForm.value))
            run({
                ...params,
                ...getPagination(is),
                lang: props.movie?.lang,
            } as any)
        }
        function cancel() {
            pageState.dataSource = []
            emit('update:visible', false)
            emit('cancel')
        }
        async function submit() {
            if (pageState.dataSource.length === 0) {
                return errorTips('请选择推荐剧情')
            }
            const { success } = await API.server.movie.addRecommendations.request({
                movieId: Number($route.params.id),
                recommendedIds: pageState.dataSource,
            })
            if (success) {
                successTips('设置成功')
                cancel()
                emit('submit')
            }
        }
        const { searchForm, expand, expandToggle } = useSearch<API.server.movie.getMoviePage.Params>(defaultParams)
        const { run, data, getPagination, renderPagination, loading } = useRequest(
            API.server.movie.getMoviePage.request,
            {
                manual: false,
                pagination: true,
                paginationDefaultConfig: {
                    pageSize: 12,
                },
                defaultParams: [defaultParams]
            }
        )
        function add(id: number) {
            const index = pageState.dataSource.indexOf(id)
            if (index === -1) {
                pageState.dataSource.push(id)
            } else {
                pageState.dataSource.splice(index, 1)
            }
        }
        watch(
            () => props.visible,
            (visible) => {
                if (visible) {
                    search()
                }
            }
        )
        return () => <a-modal
            title='推荐剧情'
            visible={props.visible}
            onCancel={cancel}
            footer={null}
            centered
            confirmLoading={loading.value}
            width={'70%'}
        >
            <f-search
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                loading={loading.value}
                clear={clear}
                search={search}
                expand={{
                    value: expand.value,
                    expandToggle,
                }}
                model={searchForm.value}
                rows={rows.filter(row => row.key !== 'lang')}
            />
            <a-spin spinning={loading.value}>
                <a-row gutter={20}>
                    {
                        data.value.data?.data?.map((item: defs.server.MovieEntity) => {
                            return <a-col span={4} key={item.id} style={{ position: 'relative', }}>
                                <div style={{ position: 'relative', }} onClick={() => add(item.id)}>
                                    <img src={item.cover} alt="" style={{ width: '100%', cursor: 'pointer', aspectRatio: 3 / 4 }} />
                                    <div class="icon-warp" v-show={pageState.dataSource.includes(item.id)}>
                                        <CheckOutlined class="icon" />
                                    </div>
                                </div>
                                <div style={{ textAlign: 'center', margin: '3px 0 10px' }}>{item.name}</div>
                            </a-col>
                        })
                    }
                </a-row>
                {!data.value.data?.data?.length && <a-empty />}
            </a-spin>
            {renderPagination()}
            <div style={{ textAlign: 'center' }}>
                <a-button type="primary" loading={loading.value} onClick={submit}>
                    提交
                </a-button>
                <a-button onClick={cancel}>取消</a-button>
            </div>
        </a-modal>
    }
})